<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../libs/js/vue.js"></script>
    <script src="../libs/js/vue-router.js"></script>  
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <!-- $.ajax  -->
    <title>Document</title>
    <style>
        .box{
            width:80%;
            height:400px;
            border-radius: 10px;
            border:1px solid darkorange;
        }
        .router-link-exact-active, .router-link-active{
            background: darkred;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{msg }}</h2>
        
        <my-head></my-head>
        <!-- 6. 导航跳转 -->
        <p>
            <router-link :to="{name:'main'}">主页</router-link>
            <router-link :to="{name:'find',query:{id:2021},params:{address:'wuhan',who:'zkl'}}">朋友圈</router-link>
            <router-link :to="{name:'news'}">咨询</router-link>
            <router-link :to="{name:'mine',query:{phone:18011011010}}">个人中心</router-link>
        </p>
        <hr>
        <!-- 5 路由出口  显示加载当前的路由组件  -->
        <div class="box">
            <router-view></router-view>
        </div>

    </div>

    <template id="head">
        <header>
            <h2>Head- wh2107-daydayup</h2>
        </header>
    </template>

    <template id="main">
        <div>
            <h2>Main - Main -  主页</h2>
        </div>
    </template>
    <template id="find">
        <div>
            <h2>find - find -  朋友圈</h2>
            <p>
                id : {{$route.query.id}}
            </p>
            <p>
                who: {{$route.params.who}}
            </p>
            <p>
                address:{{$route.params.address}}
            </p>
        </div>
    </template>
    <template id="news">
        <div>
            <h2>news - news -  咨询</h2>
            <div>
                <p v-for="(l,i) in list" :key="i">
                    <router-link :to="{name:'detail',params:{id:l.id},query:{name:l.name}}">
                        {{l.name}}
                    </router-link>
                </p>
            </div>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - mine -  个人中心</h2>
            <p>phone == {{$route.query.phone }}</p>
            <button @click="goback">点击返回 </button>
            <button @click="gotopage">点击进入 page </button>
        </div>
    </template>

    <template id="detail">
        <div>
            <h2>detail - detail - </h2>
            <p>
                id  =   {{$route.params.id}}
            </p>
            <p>
                name = {{$route.query.name }}
            </p>
        </div>
    </template>
    <script>
        const Head = {
            template:"#head"
        }
        Vue.component("my-head",Head)
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  Vue脚手架

        // 1. 定义路由组件
        const Main = {
            template:"#main"
        }
        const Find = {
            template:"#find"
        }
        const News = {
            template:"#news",
            data(){
                return {
                    list:[]
                }
            },
            mounted(){
                $.ajax({
                    url:"http://47.104.209.44:3333/top/playlist?limit=10",
                    data:{},
                    type:"GET",
                    success:res=>{
                        console.log(res)
                        this.list = res.playlists
                    }
                })
            }
        }
        const Detail = {
            template:"#detail"
        }
        const Mine = {
            template:"#mine",
            methods:{
                goback(){
                    // history.go(-1)
                    // history.back();

                    // router.go(-1);
                    // router.back()
                    // this.$router.go(-1)
                    this.$router.back()
                },
                gotopage(){
                    // this.$router.push("/main")
                    // router.push({path:"/main"})
                    // router.push({name:"main"})
                    router.push({name:'find',params:{address:"上海",who:'许权'},query:{id:2022} })
                }
            }
        }
        // 2. 定义路由配置参数
        const routes = [
            {path:"/", redirect:{name:"main"}},
            {path:"/main",name:'main',component:Main},
            {path:"/find/:address/info/:who?",name:'find',component:Find},
            {path:"/news",name:'news',component:News},
            {path:"/detail/:id",name:'detail',component:Detail},

            {path:"/mine",name:'mine',component:Mine},
            {
                path:"/404",name:'notfound',component:{
                    template:"<h1>notfound - notfound - 404 </h1>"
                }
            },
            {
                path:"*",
                redirect:{
                    name:"main"
                }
            }
        ]
        // 3. 创建路由对象
        const router = new VueRouter({
            routes,
            mode:"hash",   // 路由模式  默认hash 
            base:"./",   // 基路径   ''  ==>  /app/project/vue  
            scrollBehavior:function(){     //  监听滚动行为 

            }
        })
        // base 应用的基路径  一般不用设置   采用是相对路径 
        // mode 路由模式   hash  url地址的 hash 模式  兼容性强     带#号 可以刷新浏览器  但是地址比较长 不简洁
        // history  不带 # 号  不能刷新浏览器 (需要服务器重定向404 )   比较简洁优雅   依赖 HTML5 History API 和服务器配置7
        // 4.挂载到根实例
        const vm = new Vue({
            // this.$router 获取路由对象
            router,
            el:"#app",
            data:{
                msg:"路由基础  - 路由跳转"
            },
            watch:{
                '$route':function(to,from){   // 监听路由切换
                    console.log(to)    // 进入的新路由
                    console.log(from)  // 离开的旧路由 
                }
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
                console.log(this.$router)    // 路由对象  负责路由切换 重定向
                console.log(this.$route)     // 路由信息对象  记录当前路由的相关数据信息  (参数 params query meta )
            }
        })
    </script>

     <!--  
       嵌套路由
       有多少层嵌套就写多少个 children  每一层嵌套都必须对应有一个 router-view 
 
        路由跳转

        1. 声明式  html跳转  router-link   to
        2. 编程式  javascript 跳转   函数代码跳转  this.$router  router 
        // 字符串
        router.push('home')
        // 对象
        router.push({ path: 'home' })
        // 命名的路由
        router.push({ name: 'user', params: { userId: '123' }})
        // 带查询参数，变成 /register?plan=private
        router.push({ path: 'register', query: { plan: 'private' }})

        router == this.$router  路由实例对象 进行路由跳转 还可以监听路由切换 
        $route == this.$route   路由对象属性  (params query name)

        router.go(1)
        router.goforward();    前进
        router.go(-1);       后退 
        router.back()  
     -->
</body>
</html>